<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Popconfirm from "./Popconfirm.svelte";
    import { Link } from "../Typography";
    import Space from "../Space/Space.svelte";

    const { Story } = defineMeta({
        title: "Components/Views/Popconfirm",
        component: Popconfirm,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space justify="center" style="margin-top: 150px;">
            <Popconfirm arrow title="Are you sure?" content="content content content">
                {#snippet icon()}
                    <Icon icon="f7:question-circle-fill" color="var(--cui-color-warning)" width={16} height={16} />
                {/snippet}
                <Link>delete?</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>

<Story name="ButtonType">
    {#snippet template(args)}
        <Space justify="center" style="margin-top: 150px;">
            <Popconfirm arrow title="Are you sure?" content="content content content" okType="danger">
                {#snippet icon()}
                    <Icon icon="f7:question-circle-fill" color="var(--cui-color-warning)" width={16} height={16} />
                {/snippet}
                <Link>按钮类型</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>

<Story name="StopClose">
    {#snippet template(args)}
        <Space justify="center" style="margin-top: 150px;">
            <Popconfirm
                arrow
                title="Are you sure?"
                content="content content content"
                okType="danger"
                onok={async () => {
                    return false;
                }}
            >
                {#snippet icon()}
                    <Icon icon="f7:question-circle-fill" color="var(--cui-color-warning)" width={16} height={16} />
                {/snippet}
                <Link>阻止关闭</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>

<Story name="SyncClose">
    {#snippet template(args)}
        <Space justify="center" style="margin-top: 150px;">
            <Popconfirm
                arrow
                title="Are you sure?"
                content="content content content"
                onok={async () => {
                    return await new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true);
                        }, 2000);
                    });
                }}
            >
                {#snippet icon()}
                    <Icon icon="f7:question-circle-fill" color="var(--cui-color-warning)" width={16} height={16} />
                {/snippet}
                <Link>异步关闭</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>

<Story name="Disabled">
    {#snippet template(args)}
        <Space justify="center">
            <Popconfirm arrow title="Are you sure?" content="content content content" disabled>
                <Link>禁用</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>

<Story name="ShowCancel">
    {#snippet template(args)}
        <Space justify="center" style="margin-top: 150px;">
            <Popconfirm arrow title="Are you sure?" showCancel={false} content="content content content">
                <Link>隐藏取消按钮</Link>
            </Popconfirm>
        </Space>
    {/snippet}
</Story>
